import { Tabs } from "antd";
import React, { useState } from "react";
import './tab.css'

function Tab(props: { items: any; }) {
    const { items } = props;
    const [tabPosition, setTabPosition] = useState('left');
    return (
        <Tabs
            size='middle'
            tabPosition={tabPosition}
            items={items.map((item: any) => {
                return {
                    label: `${item.title}`,
                    icon: item.icon,
                    key: item.id,
                    children: <div className="tabs_imgs">
                        {
                            item.Children && item.Children.map((item1: any, index: Key | null | undefined) => {
                                return (
                                    <img src={item1} key={index} alt="" style={{ width: "80px",margin:"8px" }} />
                                )
                            })
                        }
                    </div>
                };
            })}
        >
        </Tabs>
    )
}
export default Tab;